<template>
  <div  v-if="list.length > 0">
  	<div>
	  	<div class="hk-thetitle">{{list[0].brandName}}</div>
	  	<div class="bwt hk-type">
	  		<div class="hk-catename">产品</div>
	  		<ul>
	  			<li  v-for="(it,index) in skuList" @click="skuFun(index)" :class="[it.active ? 'active' : '']">{{it.name}}</li>
	  		</ul>
	  	</div>
	  	<div class="bwt hk-list">
	  		<div class="hk-catename">合计</div>
	  		<div class="hk-input">
	  			<input type="text" name="" placeholder="请输入" v-model='Price' @blur="checkType">港币
	  		</div>
	  	</div>
    </div>
    <div class="bwt hk-info">
  		<div class="hk-list">
	  		<div class="hk-catename">接种人姓名</div>
	  		<div class="hk-input">
	  			<input type="text" name="" placeholder="请输入" v-model="name">
	  		</div>
	  	</div>
	  	<div class="hk-list">
	  		<div class="hk-catename">出生日期</div>
	  		<div class="hk-input">
	  			<input type="date" name="" placeholder="请输入" v-model="birthday" >
	  		</div>
        <div><span class="iconfont icon-right" style="font-size: 0.8rem;margin-right: -.2rem;color: #999999"></span></div>
	  	</div>
	  	<div class="hk-list">
	  		<div class="hk-catename">联系人手机号</div>
	  		<div class="hk-input">
	  			<input type="tel" name="" placeholder="请输入" v-model="phone">
	  		</div>
	  	</div>
  	</div>
  	<div class="bwt hk-type textarea">
  		<div class="hk-catename">备注：</div>
  		<textarea placeholder="如果接种人不是本人，请补充联系人姓名、与接种人关系和联系方式" v-model="remark" ></textarea>
  	</div>
    <div class="hk-rule">下单后如需退款，开针前退款扣除20%手续费和服务费<br>开针（任何一种疫苗）后不可退款</div>
  	<div class="pos-btn">
        <div class="now-submit" @click="postHref" style="height: 2rem;line-height: 2rem;font-size: .75rem">确认支付</div>
    </div>
    <router-link  tag="div" class="hkbp-link" :to="'/active/orderlist'"  v-show="iswx" >买单记录</router-link>
  </div>
</template>
<script>
  import Vue from 'vue'
  export default {
    name: 'HkVaccine',
    data () {
      return {
        iswx: false,
        list: [],
        skuList: [
          {name: 'HPV9价 单针', id: 1, active: false},
          {name: 'HPV9价 3针', id: 2, active: false},
          {name: '日本乙脑', id: 3, active: false},
          {name: '四痘MMRV', id: 4, active: false},
          {name: '13价', id: 5, active: false},
          {name: '五联', id: 6, active: false},
          {name: '其他', id: 7, active: false}
        ],
        Price: '',
        birthday: '',
        phone: '',
        remark: '',
        name: ''
      }
    },
    methods: {
      init () {
        if (Vue.prototype.$payWay === 200) {
          this.iswx = false
        } else {
          this.iswx = true
        }
        // this.birthday = this.$tools.getFormt(1)
        this.getInfo()
      },
      getInfo: function () {
        let _this = this
        this.$EcHttpUtils.get('shop/list.json', {trademarkIds: _this.$route.params.id}).then((resp) => {
          if (resp.data.statusCode === 0) {
            this.list = resp.data.data
            if (this.list.length <= 0) {
              alert('该品牌下暂无门店')
            }
          }
        })
      },
      skuFun (index) {
        this.skuList.forEach((v, k) => {
          if (index === k) {
            v.active = !v.active
          }
        })
      },
      checkType (e) {
        let num = e.target.value
        if (parseFloat(num) !== num && num !== '') {
          num = parseFloat(num)
        }
        if (isNaN(num) || parseFloat(num) <= 0 || num === '') {
          num = ''
        }
        this.Price = num
      },
      createOrder (obj) {
        // payType 1：微信，2：支付宝 3:pos机 4:香港支付宝 5：微信香港疫苗
        let type = this.list[0].type // 1普通门店 2 香港疫苗
        if (Vue.prototype.$payWay === 100) {
          if (type === 1) {
            obj.payType = 1
          } else {
            obj.payType = 5
          }
        } else if (Vue.prototype.$payWay === 200) {
          if (type === 1) {
            obj.payType = 2
          } else {
            obj.payType = 4
          }
        }
        // console.log(obj)
        this.$EcHttpUtils.post('order/createOrder.json', obj).then((resp) => {
          if (resp.data.statusCode === 0) {
            let payInfoParams = resp.data.data.payInfoParam
            console.log(payInfoParams)
            // 支付相关问题
            if (Vue.prototype.$payWay === 100) {
              let payInfoParam = {
                orderNo: payInfoParams.orderNo,
                redirectUrl: this.$Constants.CommonApiUrl.payPage,
                body: '线下订单支付',
                appid: this.$Constants.PAYAPPID,
                tradeType: 'JSAPI',
                openid: payInfoParams.openid,
                access_token: this.$JzoAuth.getAccessToken()
              }
              this.$tools.payWay(this.$Constants.CommonApiUrl.wxPay, payInfoParam, 1)
            } else if (Vue.prototype.$payWay === 200) {
              let newpayInfoParam = {
                orderNo: payInfoParams.orderNo,
                redirectUrl: this.$Constants.CommonApiUrl.hkpayPage + '/' + payInfoParams.orderNo,
                subject: 'caihongyuer health service',
                currency: 'HKD',
                body: 'caihongyuer health service'
              }
              this.$tools.payWay(this.$Constants.CommonApiUrl.globalalipay, newpayInfoParam, 1)
            }
          } else {
            this.$layer.toast({content: resp.data.message})
          }
        })
      },
      postHref () {
        if (this.list.length <= 0) {
          alert('该品牌下暂无门店')
        }
        if (Vue.prototype.$payWay === 300) {
          this.$layer.toast({content: '请在微信或者支付宝里打开'})
          return false
        }
        let products = []
        this.skuList.forEach((v, k) => {
          if (v.active) {
            products.push(v.name)
          }
        })
        if (products.length <= 0) {
          this.$layer.toast({content: '尚未选择套餐内容'})
          return false
        }
        if (this.Price === '') {
          this.$layer.toast({content: '金额不能为空'})
          return false
        }
        if (this.Price <= 0) {
          this.$layer.toast({content: '请输入正确的金额'})
          return false
        }
        if (this.name.replace(/^\s+|\s+$/g, '').length <= 0) {
          this.$layer.toast({content: '接种人姓名不能为空'})
          return false
        }
        let timestamp = Date.parse(new Date())
        timestamp = timestamp / 1000
        let stringTime = this.birthday
        let timestamp2 = Date.parse(new Date(stringTime))
        timestamp2 = timestamp2 / 1000
        if (stringTime === '') {
          this.$layer.toast({content: '请选择生日'})
          return false
        }
        if (timestamp2 > timestamp) {
          this.$layer.toast({content: '生日不能大于当前时间'})
          return false
        }
        if (this.phone.replace(/^\s+|\s+$/g, '').length <= 0) {
          this.$layer.toast({content: '手机号码不能为空'})
          return false
        }
        if (!this.$tools.isPhone(this.phone)) {
          this.$layer.toast({content: '手机号码格式不正确'})
          return false
        }
        let obj = {
          expenseAmount: this.Price,
          noDiscountAmount: 0,
          payMethod: 1,
          payType: '',
          payAmount: this.Price,
          remark: this.remark,
          shopId: this.list[0].id,
          redirectUrl: this.$Constants.CommonApiUrl.payPage,
          vaccineExtendInfo: {
            name: this.name,
            birthday: this.birthday,
            mobile: this.phone,
            products: ''
          }
        }
        if (products.length > 0) {
          obj.vaccineExtendInfo.products = JSON.stringify(products)
        }
        // console.log(obj)
        this.createOrder(obj)
      }
    },
    mounted () {
      this.init()
    }
  }
</script>
